<html lang="en">
<head>
    <title>红色简易二级下拉导航菜单 - A5源码</title>
    <meta charset="utf-8">
    <style>
        /**
        *在Position属性值为absolute的同时，
        *如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）
        *的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，
        *这对精确定位是很有帮助的。
        */
        *{
            margin: 0;
            padding: 0;
        }
        body{background:#eee;}
        /*nav导航盒子*/
        nav{
            width: 800px;
            height: 40px;
            line-height: 40px;
            /*导航位置*/
            margin: 100px auto;
            text-align: center;
            font-size: 12px;
            position: relative;
            background: #ff5640;
        }
        /*nav-main*/
        .nav-main{
            width: 100%;
            height: 100%;
            list-style-type: none;
        }
        .nav-main span{
            display: inline-block;
            margin-left: 18px;
            width: 7px;
            height: 7px;
            background: url(http://down.admin5.com/demo/code_pop/19/468/img/down-icon.png) no-repeat;
        }
        /*图标向上旋转*/
        .hover-up{
            transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            -webkit-transition:all 0.2s ease-in-out;
        }
        /*图标向下旋转*/
        .hover-down{
            transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -webkit-transition:all 0.2s ease-in-out;
        }
        /*导航条设置*/
        .nav-main>li{
            width: 120px;
            height: 100%;
            display: block;
            float: left;
            background: #ff5640;
            color: #fff;
            margin-right: 1px;
            cursor: pointer;
        }
        .nav-main>li:hover{
            background: #ff3e3e;
        }
        /*隐藏盒子设置*/
        .hidden-box{
            width: 118px;
            border: 1px solid #ff3e3e;
            border-top: 0;
            position: absolute;
            display: none;
            top: 40px;
        }
        .hidden-box>ul{
            list-style-type: none;
            color: #ff3e3e;
            cursor: pointer;
        }
        .hidden-box li{background:#fff;}
        .hidden-box li:hover{
            background: #ff3e3e;
            color: #fff;
        }
        /*隐藏盒子位置设置*/
        .hidden-loc-index{
            left: 121px;
        }
        .hidden-loc-us{
            left: 242px;
        }
        .hidden-loc-info{
            left: 363px;
        }
        /*download by www.sucaijiayuan.com*/
    </style>

</head>
<body>
<!--nav-->
<nav>
    <!--导航条-->
    <ul class="nav-main">
        <li>首页</li>
        <li id="li-1">产品信息<span class="hover-down"></span></li>
        <li id="li-2">关于我们<span class="hover-down"></span></li>
        <li id="li-3">商家信息<span class="hover-down"></span></li>
        <li>加入我们</li>
        <li>联系我们</li>
    </ul>
    <!--隐藏盒子-->
    <div id="box-1" class="hidden-box hidden-loc-index" style="display: none;">
        <ul>
            <li>关于我们</li>
            <li>产品信息</li>
            <li>关于我们</li>
        </ul>
    </div>
    <div id="box-2" class="hidden-box hidden-loc-us" style="display: none;">
        <ul>
            <li>关于我们</li>
            <li>产品信息</li>
            <li>关于我们</li>
            <li>商家信息</li>
        </ul>
    </div>
    <div id="box-3" class="hidden-box hidden-loc-info" style="display: none;">
        <ul>
            <li>产品信息</li>
            <li>关于我们</li>
            <li>商家信息</li>
            <li>加入我们</li>
        </ul>
    </div>
</nav>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(document).ready(function(){
//    nav-li hover e
        var num;
        $('.nav-main>li[id]').hover(function(){
            /*图标向上旋转*/
            $(this).children().removeClass().addClass('hover-up');
            /*下拉框出现*/
            var Obj = $(this).attr('id');
            num = Obj.substring(3, Obj.length);
            $('#box-'+num).slideDown(1000);
        },function(){
            图标向下旋转
            $(this).children().removeClass().addClass('hover-down');
            /*下拉框消失*/
            $('#box-'+num).hide();
        });
//    hidden-box hover e
        $('.hidden-box').hover(function(){
            /*保持图标向上*/
            $('#li-'+num).children().removeClass().addClass('hover-up');
            $(this).show();
        },function(){
            $(this).slideUp(200);
            $('#li-'+num).children().removeClass().addClass('hover-down');
        });
    });
</script>

</body>
</html>

